<template>
  <div class="wrapper">
    <header>
      <p>个人中心</p>
    </header>
    <div class="other">
      <div class="head">
        <div class="head-img">
          <img :src="user.userImg" alt="头像">
        </div>
        <div class="head-dsb">
          <p>{{user.userName}}</p>
          <br/>
          <p>手机号 {{user.userId}}</p>
        </div>
      </div>

      <ul class="nav">
        <li>
          <img src="../assets/indent.png">
          <p>优惠券</p>
        </li>
        <li>
          <img src="../assets/clt.png">
          <p>签到</p>
        </li>
        <li @click="toWallet">
          <img src="../assets/rcm.png">
          <p>钱包</p>
        </li>
      </ul>

      <section class="mt-1">
        <div class="ps-lt">
          <div class="lt-dsb" @click="change">
            <p>修改密码</p>
            <i class="arr-right"></i>
          </div>
        </div>
        <div class="ps-lt">
          <div class="lt-dsb" @click="editInfo">
            <p>修改信息</p>
            <i class="arr-right"></i>
          </div>
        </div>
        <div class="ps-lt">
          <div class="lt-dsb">
            <p>附近热门</p>
            <i class="arr-right"></i>
          </div>
        </div>
        <div class="ps-lt">
          <div class="lt-dsb">
            <p>推荐商家</p>
            <i class="arr-right"></i>
          </div>
        </div>
        <div class="ps-lt">
          <div class="lt-dsb cl-bb" @click="logout">
            <p>退出登录</p>
            <i class="arr-right"></i>
          </div>
        </div>
      </section>
      <div class="jg"></div>
    </div>
    <Footer></Footer>
	<div v-if="showEditModal" class="edit-modal">
	    <div class="modal-content">
	      <span class="close" @click="showEditModal = false">&times;</span>
	      <p>修改用户信息</p>
	      <input type="text" placeholder="用户名" v-model="editData.userName" class="input-common" />
	      <input type="file" @change="handleImageChange" class="input-file" />
	      <button class="file-upload-btn">选择头像</button>
	      <img :src="editData.userImg" alt="头像预览" v-if="editData.userImg" class="edit-modal-img" />
	      <div class="content">
	        <input type="radio" v-model="editData.userSex" value="1" id="male" class="input-radio" style="width:6vw;height: 3.2vw;">
	        <label for="male" style="margin-right: 1vw;">男</label>
	        <input type="radio" v-model="editData.userSex" value="0" id="female" class="input-radio" style="width:6vw;height: 3.2vw;">
	        <label for="female">女</label>
	      </div>
	      <button @click="updateInfo" class="file-upload-btn">确认修改</button>
	    </div>
	  </div>
	  <div v-if="showPasswordModal" class="password-modal">
	    <div class="modal-content">
	      <span class="close" @click="showPasswordModal = false">&times;</span>
	      <p>修改密码</p>
	      <input type="password" placeholder="原密码" v-model="originalPassword" class="input-common" />
	      <input type="password" placeholder="新密码" v-model="newPassword" class="input-common" />
	      <input type="password" placeholder="确认新密码" v-model="confirmedPassword" class="input-common" />
	      <button @click="updatePassword" class="file-upload-btn">确认修改</button>
	    </div>
	  </div>
	      </div>
	    </template>

<script>
import Footer from '../components/Footer.vue';
import request from '../request.js';
export default {
  name: 'My',
  data() {
    return {
      user: {
        userImg: '',
        userName: '',
        userId: '',
		userSex: 1
      },
	   editData: {  // 用于绑定模态框中的输入
	          userName: '',
	          userImg: '',
	          userSex: 1
	        },
			editpasswordData: {
				newPassword: '',
			},
     originalPassword: '',
         confirmedPassword: '',
         showPasswordModal: false,
	  showEditModal: false  // 控制修改信息模态框的显示
    };
  },
  created() {
    this.user = this.$getSessionStorage('user');
  },
  methods: {
    toWallet() {
      this.$router.push('/wallet');  // 重定向到钱包页面
    },
    change() {
      this.showPasswordModal = true;  // 显示修改密码模态框
    },
	editInfo() {
	      this.showEditModal = true;  // 显示修改信息模态框
	    },
	    handleImageChange(event) {
	      const file = event.target.files[0];
	      const reader = new FileReader();
	      reader.onload = (e) => {
	        this.editData.userImg = e.target.result;
	      };
	      reader.readAsDataURL(file);
	    },
	    updateInfo() {
	      // 调用接口更新用户信息
	      request.put(`/users/${this.user.userId}`, this.$qs.stringify(this.editData)).then(response => {
	        // 处理响应
	        console.log('用户信息更新成功', response);
	        this.$setSessionStorage('user', this.editData);  // 更新存储的信息
	        this.showEditModal = false;  // 关闭模态框
	      }).catch(error => {
	        // 处理错误
	        console.error('更新用户信息失败', error);
	      });
	    },
    logout() {
      this.$removeSessionStorage('user');  // 清除用户信息
      this.$router.push('/login');  // 重定向到登录页面
    },
    updatePassword() {
        if (this.newPassword !== this.confirmedPassword) {
          alert('两次输入的新密码不匹配，请重新输入！');
          return;
        }
        if (this.originalPassword !== this.user.password) { // 假设缓存的用户信息中包含密码
          alert('原密码错误，无法修改！');
          this.showPasswordModal = false; // 关闭模态框
          return;
          }
    
        // 构造请求数据
        const data = {
          originalPassword: this.originalPassword,
          newPassword: this.editpasswordData.newPassword,
        };
    
        // 发送更新密码请求
        request.put(`/users/${this.user.userId}`, this.$qs.stringify(data)).then(response => {
          // 处理响应
          console.log('密码更新成功', response);
		  this.$setSessionStorage('user', this.editpasswordData);
          this.showPasswordModal = false;  // 关闭模态框
          // 可能需要重新登录或其他逻辑
        }).catch(error => {
          // 处理错误
          console.error('密码更新失败', error);
          alert('密码更新失败，请重试！');
        });
  },
  },
  components: {
    Footer
  }
}
</script>

<style scoped>
	/* 通用输入框样式 */
	.input-common {
	  width: 100%;
	  padding: 10px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  font-size: 16px;
	  box-sizing: border-box;
	  margin-bottom: 10px;
	}
	
	/* 聚焦状态样式 */
	.input-common:focus {
	  border-color: #0097ff;
	  box-shadow: 0 0 8px rgba(0, 151, 255, 0.5);
	  outline: none;
	}
	
	/* 文件输入框样式 */
	.input-file {
	  display: none;
	}
	
	/* 自定义文件选择按钮 */
	.file-upload-btn {
	  display: inline-block;
	  padding: 10px 15px;
	  background-color: #0097ff;
	  color: white;
	  border: none;
	  border-radius: 4px;
	  cursor: pointer;
	  font-size: 16px;
	}
	
	.file-upload-btn:hover {
	  background-color: #007ac1;
	}
	
	/* 单选按钮样式 */
	.input-radio {
	  margin-right: 5px;
	}
	
	/* 单选按钮美化 */
	.input-radio + label {
	  font-size: 16px;
	  margin-right: 15px;
	  cursor: pointer;
	}
	/* 模态框背景 - 半透明遮罩 */
	.edit-modal {
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	/* 模态框内容 - 有色背景 */
	.modal-content {
	  background-color: #fff; /* 白色背景 */
	  padding: 20px;
	  border-radius: 5px;
	  width: 80%;
	  max-width: 400px; /* 限制最大宽度 */
	  z-index: 1050; /* 确保内容在遮罩之上 */
	  position: relative; /* 相对定位 */
	}
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #efeff4;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background:#0097ff;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .other {
  width: 100%;
  margin-top: 10vw;
}

.wrapper .other .head {
  position: relative;
  width: 100%;
  height: 20vw;
  padding-top:12vw;
  background:#ffffff;
  background-size: 100% 100%;
}

.wrapper .other .head-img {
  position: absolute;
  top: 0.35rem;
  left: 10vw;
  width: 1.43rem;
  height: 1.43rem;
  padding: 0.04rem;
  border-radius: 1rem;
  background-color: #fff;
}

.wrapper .other .head-img img {
  margin-top: 4.8vw;
  width: 20vw;
  height: 20vw;
}

.wrapper .other .head-dsb {
  position: absolute;
  top: 8vw;
  left: 35vw;
}

.wrapper .other .head-dsb p {
  font-size: 4.5vw;
  color: #666;
}

.wrapper .other .head-dsb .dsb-id {
  margin-top: 0.08rem;
}

.wrapper .other .nav {
  margin-top: 2vw;
  width: 100%;
  height: 25vw;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
}

.wrapper .other .nav li {
  width: 16vw;
  height: 20vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  border-bottom: 1px solid #e5e5e5;
}

.wrapper .other .nav li img {
  width: 10vw;
  height: 10vw;
}

.wrapper .other .nav li p {
  font-size: 4vw;
  color: #666;
}

.wrapper .other .mt-1 {
  padding-top: 3vw;
  width: 100%;
  height: 16vw;
  background-color: #fff;
  margin-bottom: 5vw;
}

.wrapper .other .mt-1 .ps-lt {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
}

.wrapper .other .mt-1 .ps-lt .lt-dsb {
  position: relative;
  width: 90%;
  height: 6vw;
  line-height: 6vw;
  margin-left: 2vw;
  border-bottom: 1px solid #e5e5e5;
}

.wrapper .other .mt-1 .ps-lt .lt-dsb p {
  margin-left: 2vw;
  font-size: 4vw;
  color: #838383;
}

.wrapper .other .mt-1 .ps-lt .lt-dsb .arr-right {
  display: block;
  position: absolute;
  top: 0.21rem;
  right: 0.25rem;
  width: 0.14rem;
  height: 0.24rem;
  background: url(../assets/arr-right.png) no-repeat;
  background-size: 0.14rem 0.24rem;
}

.wrapper .other .jg {
  padding-bottom: 0.8rem;
}

.wrapper .other.head.head-img {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 100px;
  overflow: hidden;
}

.wrapper .other.head.head-img img {
  width: 100%;
  height: 100%;
}

.password-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  width: 80%;
}

.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}
</style>